<!DOCTYPE html>
<html lang="zh-CN">


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="viggo" />
  <title>MrLiu的博客 - </title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="shortcut icon" href="/static/favicon.ico">
  <link rel="stylesheet" href="/css/github.min.css">
  <script src="/js/highlight.min.js"></script>
  
<link rel="stylesheet" href="//fonts.loli.net/css?family=Arimo:400,700,400italic.css">
<link rel="stylesheet" href="/css/fonts/linecons/css/linecons.min.css">
<link rel="stylesheet" href="/css/fonts/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/xenon-core.min.css">
<link rel="stylesheet" href="/css/xenon-components.min.css">
<link rel="stylesheet" href="/css/xenon-skins.min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/nav.min.css">
<link rel="stylesheet" href="/css/md.css">

  
<script src="/js/jquery-1.11.1.min.js"></script>

  
<script src="/js/header.js"></script>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
        
<script src="/js/html5shiv.min.js"></script>

        
<script src="/js/respond.min.js"></script>

    <![endif]-->
  <script>
  hljs.configure({useBR: true});
  hljs.initHighlightingOnLoad();
  </script>
  <!-- / FB Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://liu-meizhou.github.io/js%E5%8E%9F%E5%9E%8B%E9%93%BE/index.html">
  <meta property="og:title" content="MrLiu的博客 - ">
  <meta property="og:description" content="">
  <meta property="og:site_name" content="MrLiu的博客 - ">
  
  <meta property="og:image" content="/images/webstack_banner_cn.png">
  
  <!-- / Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="MrLiu的博客 - ">
  <meta name="twitter:description" content="">
  
  <meta name="twitter:image" content="/images/webstack_banner_cn.png">
  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div class="page-container">
    <div class="sidebar-menu toggle-others fixed">
  <div class="sidebar-menu-inner">
    <header class="logo-env">
      <div class="logo">
        <a href="/index.html" class="logo-expanded">
          <img src="/images/logo@2x.png" width="100%" alt="" />
        </a>
        <a href="/index.html" class="logo-collapsed">
          <img src="/images/logo-collapsed@2x.png" width="40" alt="" />
        </a>
      </div>
      <div class="mobile-menu-toggle visible-xs">
        <a href="#" data-toggle="user-info-menu">
          <i class="linecons-cog"></i>
        </a>
        <a href="#" data-toggle="mobile-menu">
          <i class="fas fa-bars"></i>
        </a>
      </div>
    </header>
    <ul id="main-menu" class="main-menu">
      

      
        <li><a href="#CSS参考" class="smooth" style="padding-left: 0em" title="CSS参考"><i class="far fa-star"></i><span class="title">CSS参考</span></a></li><li><a href="#显示器设备" class="smooth" style="padding-left: 0em" title="显示器设备"><i class="far fa-star"></i><span class="title">显示器设备</span></a></li><li><a href="#颗粒感" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="颗粒感"><i class="far fa-star"></i><span class="title">颗粒感</span></a><ul><li><a href="#Retina" class="smooth" style="padding-left: 1em" title="Retina"><i class="far fa-star"></i><span class="title">Retina</span></a></li><li><a href="#物理密度和逻辑密度" class="smooth" style="padding-left: 1em" title="物理密度和逻辑密度"><i class="far fa-star"></i><span class="title">物理密度和逻辑密度</span></a></li></ul></li><li><a href="#响应式" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="响应式"><i class="far fa-star"></i><span class="title">响应式</span></a><ul><li><a href="#注意像素和尺寸" class="smooth" style="padding-left: 1em" title="注意像素和尺寸"><i class="far fa-star"></i><span class="title">注意像素和尺寸</span></a></li><li><a href="#媒体查询" class="smooth" style="padding-left: 1em" title="媒体查询"><i class="far fa-star"></i><span class="title">媒体查询</span></a></li><li><a href="#常见手机类型" class="smooth" style="padding-left: 1em" title="常见手机类型"><i class="far fa-star"></i><span class="title">常见手机类型</span></a></li><li><a href="#常见iPad类型" class="smooth" style="padding-left: 1em" title="常见iPad类型"><i class="far fa-star"></i><span class="title">常见iPad类型</span></a></li><li><a href="#常见显示器类型" class="smooth" style="padding-left: 1em" title="常见显示器类型"><i class="far fa-star"></i><span class="title">常见显示器类型</span></a></li><li><a href="#更多设备类型" class="smooth" style="padding-left: 1em" title="更多设备类型"><i class="far fa-star"></i><span class="title">更多设备类型</span></a></li></ul></li><li><a href="#单位" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="单位"><i class="far fa-star"></i><span class="title">单位</span></a><ul><li><a href="#绝对长度单位" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="绝对长度单位"><i class="far fa-star"></i><span class="title">绝对长度单位</span></a><ul><li><a href="#px" class="smooth" style="padding-left: 2em" title="px"><i class="far fa-star"></i><span class="title">px</span></a></li></ul></li><li><a href="#相对长度单位" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="相对长度单位"><i class="far fa-star"></i><span class="title">相对长度单位</span></a><ul><li><a href="#"><a href="#" class="headerlink" title="%"></a>%</h3><ul>
<li>相对于父元素的相同属性的百分比</li>
</ul>
<h2 id="em-rem" class="smooth" style="padding-left: 2em" title="em/rem"><i class="far fa-star"></i><span class="title">em/rem</span></a></li></ul></li><li><a href="#vw-vh" class="smooth" style="padding-left: 1em" title="vw/vh"><i class="far fa-star"></i><span class="title">vw/vh</span></a></li></ul></li><li><a href="#选择器" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="选择器"><i class="far fa-star"></i><span class="title">选择器</span></a><ul><li><a href="#基本选择器" class="smooth" style="padding-left: 1em" title="基本选择器"><i class="far fa-star"></i><span class="title">基本选择器</span></a></li><li><a href="#分组选择器" class="smooth" style="padding-left: 1em" title="分组选择器"><i class="far fa-star"></i><span class="title">分组选择器</span></a></li><li><a href="#组合选择器" class="smooth" style="padding-left: 1em" title="组合选择器"><i class="far fa-star"></i><span class="title">组合选择器</span></a></li><li><a href="#伪类" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="伪类"><i class="far fa-star"></i><span class="title">伪类</span></a><ul><li><a href="#常见" class="smooth" style="padding-left: 2em" title="常见"><i class="far fa-star"></i><span class="title">常见</span></a></li></ul></li><li><a href="#伪元素" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="伪元素"><i class="far fa-star"></i><span class="title">伪元素</span></a><ul><li><a href="#常见-1" class="smooth" style="padding-left: 2em" title="常见"><i class="far fa-star"></i><span class="title">常见</span></a></li></ul></li></ul></li><li><a href="#实验性属性-amp-老型浏览器" class="smooth" style="padding-left: 0em" title="实验性属性&amp;老型浏览器"><i class="far fa-star"></i><span class="title">实验性属性&amp;老型浏览器</span></a></li><li><a href="#内置函数" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="内置函数"><i class="far fa-star"></i><span class="title">内置函数</span></a><ul><li><a href="#url" class="smooth" style="padding-left: 1em" title="url"><i class="far fa-star"></i><span class="title">url</span></a></li><li><a href="#rgb-rgba" class="smooth" style="padding-left: 1em" title="rgb/rgba"><i class="far fa-star"></i><span class="title">rgb/rgba</span></a></li><li><a href="#translate" class="smooth" style="padding-left: 1em" title="translate"><i class="far fa-star"></i><span class="title">translate</span></a></li><li><a href="#min" class="smooth" style="padding-left: 1em" title="min"><i class="far fa-star"></i><span class="title">min</span></a></li><li><a href="#max" class="smooth" style="padding-left: 1em" title="max"><i class="far fa-star"></i><span class="title">max</span></a></li><li><a href="#minmax" class="smooth" style="padding-left: 1em" title="minmax"><i class="far fa-star"></i><span class="title">minmax</span></a></li></ul></li>
      

      
      <li class="submit-tag">
        <a href="/author">
          <i class="far fa-heart"></i>
          <span class="tooltip-blue">关于作者</span>
        </a>
      </li>
      
      
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-eye"></i>
          <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-users"></i>
          <span id="busuanzi_container_site_uv">本站总访客数<span id="busuanzi_value_site_uv"></span></span>
        </a>
      </li>
      
    </ul>
  </div>
  <div class="e-resize"></div>
</div>

    <div class="main-content">
      <nav class="navbar user-info-navbar" role="navigation">
        <ul class="user-info-menu left-links list-inline list-unstyled">
          <li class="hidden-sm hidden-xs hover-line">
            <a href="#" data-toggle="sidebar">
              <i class="fas fa-bars"></i>
            </a>
          </li>
          <li class="dropdown hover-line language-switcher">
            <a href="/index.html" class="dropdown-toggle" data-toggle="dropdown">
              <img src="/images/flags/flag-cn.png" alt="flag-cn" /> Chinese
            </a>
            <ul class="dropdown-menu languages">
              <li class="active">
                <a href="/index.html">
                  <img src="/images/flags/flag-cn.png" alt="flag-cn" alt="flag-cn" /> Chinese
                </a>
              </li>
            </ul>
          </li>
          <li class="switch-mode hover-line" onclick="switchNightMode()">
            <a href="#">
              <svg t="1593061068148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1681" width="16" height="16">
                <path d="M582.4 326.4c-140.8 0-256 115.2-256 256s115.2 256 256 256 256-115.2 256-256-115.2-256-256-256z m0 448c-70.4 0-131.2-36.8-164.8-92.8 12.8 3.2 27.2 4.8 40 4.8 121.6 0 219.2-99.2 219.2-219.2 0-17.6-1.6-35.2-6.4-52.8 60.8 32 102.4 96 102.4 169.6 1.6 104-84.8 190.4-190.4 190.4zM582.4 262.4c17.6 0 32-14.4 32-32v-128c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 17.6 14.4 32 32 32zM262.4 582.4c0-17.6-14.4-32-32-32h-128c-17.6 0-32 14.4-32 32s14.4 32 32 32h128c17.6 0 32-14.4 32-32zM310.4 356.8c6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6 12.8-12.8 12.8-32 0-44.8l-91.2-91.2c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l91.2 91.2zM944 220.8c-12.8-12.8-32-12.8-44.8 0l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-33.6 0-44.8zM310.4 808l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-32 0-44.8-11.2-11.2-32-11.2-44.8 0z" p-id="1682" fill="#707070"></path>
              </svg>
            </a>
          </li>
        </ul>
        
        <a target="_blank" rel="noopener" href="https://github.com/liu-meizhou/liu-meizhou.github.io" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
        
      </nav>
      
<h1 id="CSS参考"><a href="#CSS参考" class="headerlink" title="CSS参考"></a>CSS参考</h1><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference">参考指南</a></p>
<h1 id="显示器设备"><a href="#显示器设备" class="headerlink" title="显示器设备"></a>显示器设备</h1><ul>
<li>像素<code>pixel</code>: 一个屏幕是很多个像素组成，每个像素就是一个小方格，每个小方格有它的颜色值</li>
<li>尺寸<code>inch</code>: 表示设备对角线的长度，单位英寸</li>
<li>分辨率: 表示屏幕可显示的像素是多少 值可以是像素<code>1920 x 1024</code> 像素密度<code>300ppi</code> 像素点密度<code>72dpi</code></li>
<li>像素密度<code>ppi(pixels per inch)</code>: 表示每英寸的像素数量<code>物理密度</code></li>
<li>像素点密度<code>dpi(dots per inch)</code>: 表示每英寸的像素数量<code>逻辑密度</code><ul>
<li>一张图片是宽度是 <code>6.4英寸</code>，<code>1920像素点</code>   即有<code>300ppi</code> </li>
<li>此图片显示在<code>3.2英寸</code>的显示器上，<code>width</code>设置为<code>100%</code> 即有<code>300ppi、600dpi</code></li>
<li>此图片显示在<code>12.8英寸</code>的显示器上，<code>width</code>设置为<code>100%</code> 即有<code>300ppi、150dpi</code> 此时<code>可能出现颗粒感</code></li>
</ul>
</li>
<li>像素比<code>DPR</code>: 物理像素缩小为逻辑像素(如 物理像素100 像素比为2，那么逻辑像素就是2个物理像素当一个逻辑像素使用 逻辑像素为50)</li>
</ul>
<p><strong>像素=分辨率x尺寸</strong></p>
<p><strong>对角线像素数=像素密度x尺寸</strong></p>
<p><strong>像素比=屏幕横向设备像素/理想视口的宽</strong></p>
<h1 id="颗粒感"><a href="#颗粒感" class="headerlink" title="颗粒感"></a>颗粒感</h1><h2 id="Retina"><a href="#Retina" class="headerlink" title="Retina"></a>Retina</h2><p>显示标准 <a target="_blank" rel="noopener" href="https://baike.baidu.com/item/retina/4616695">公式及其描述</a></p>
<p>简单来说 举例屏幕越近，所需要的<code>ppi</code>则需要越大才不会出现颗粒感</p>
<ul>
<li>手机 <code>300ppi</code> 不会出现颗粒感</li>
<li>平板类电脑 <code>260ppi</code> 不会出现颗粒感</li>
<li>显示屏 <code>100ppi</code> 不会出现颗粒感 <code>具体看你把显示器放多近</code></li>
</ul>
<h2 id="物理密度和逻辑密度"><a href="#物理密度和逻辑密度" class="headerlink" title="物理密度和逻辑密度"></a>物理密度和逻辑密度</h2><p><img src="../static/css.assets/20190124120320832.png" alt="在这里插入图片描述"></p>
<p><code>CSS</code>所使用的<code>px</code>都是逻辑<code>px</code></p>
<p><code>JS</code>获取密度</p>
<ul>
<li>逻辑分辨率宽：<code>window.screen.width</code></li>
<li>物理分辨率宽: <code>window.screen.width * window.devicePixelRatio</code></li>
</ul>
<h1 id="响应式"><a href="#响应式" class="headerlink" title="响应式"></a>响应式</h1><h2 id="注意像素和尺寸"><a href="#注意像素和尺寸" class="headerlink" title="注意像素和尺寸"></a>注意像素和尺寸</h2><p>web开发中</p>
<ul>
<li>iPhone 3GS (320 x 480) 3.5英寸</li>
<li>iPhone 4s (640 x 960) 3.5英寸</li>
</ul>
<p>相同尺寸下设置盒子的高度为80px，就会出现如下显示个数不同，显示大小不同</p>
<p><img src="../static/css.assets/1378268-20180920125819814-301033226.png" alt="img"></p>
<h2 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h2><p>查询分辨率和像素进行响应式设计</p>
<ul>
<li>媒体查询条件不成立的<code>css</code>还是会被加载，只是不进行使用</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@media</span> media-type <span class="hljs-keyword">and</span> (media-feature-rule) &#123;<br>    <span class="hljs-comment">/* css */</span><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>media-type: 告诉浏览器这段代码用于哪些媒体<ul>
<li>all: 所有类型</li>
<li>screen: 屏幕</li>
<li>print: 打印机 <code>网页在打印时显示的样式</code></li>
</ul>
</li>
<li>media-feature-rule: 媒体表达式<ul>
<li>resolution<ul>
<li>resolution: 分辨率</li>
<li>min-resolution: 最小分辨率<code>72dpi、200ppi</code></li>
<li>max-resolution: 最大分辨率</li>
</ul>
</li>
<li>width<ul>
<li>width: 视窗宽度</li>
<li>min-width: 最小宽度</li>
<li>max-width: 最大宽度</li>
</ul>
</li>
<li>orientation: 屏幕朝向<ul>
<li>portrait: 竖放</li>
<li>landscape: 横放</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><strong>像素=分辨率x尺寸</strong></p>
<h2 id="常见手机类型"><a href="#常见手机类型" class="headerlink" title="常见手机类型"></a>常见手机类型</h2><p>宽高比无说明都按照 1:2来</p>
<table>
<thead>
<tr>
<th align="center">设备</th>
<th align="center">像素</th>
<th align="center">分辨率</th>
<th align="center">尺寸</th>
<th align="center">宽:高</th>
</tr>
</thead>
<tbody><tr>
<td align="center">iPhone 11</td>
<td align="center">1920 x 1080</td>
<td align="center">361ppi</td>
<td align="center">6.1英寸</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">iPhone 12</td>
<td align="center">2532 x 1170</td>
<td align="center">457ppi</td>
<td align="center">6.1英寸</td>
<td align="center"></td>
</tr>
</tbody></table>
<h2 id="常见iPad类型"><a href="#常见iPad类型" class="headerlink" title="常见iPad类型"></a>常见iPad类型</h2><p>宽高比无说明都按照 4:3 来</p>
<table>
<thead>
<tr>
<th align="center">设备</th>
<th align="center">像素</th>
<th align="center">分辨率</th>
<th align="center">尺寸</th>
<th align="center">宽:高</th>
</tr>
</thead>
<tbody><tr>
<td align="center">iPad2020</td>
<td align="center">2160 x 1620</td>
<td align="center">264ppi</td>
<td align="center">10.2</td>
<td align="center"></td>
</tr>
</tbody></table>
<h2 id="常见显示器类型"><a href="#常见显示器类型" class="headerlink" title="常见显示器类型"></a>常见显示器类型</h2><p>宽高比无说明都按照 16:9 来</p>
<table>
<thead>
<tr>
<th align="center">设备</th>
<th align="center">像素</th>
<th align="center">分辨率</th>
<th align="center">尺寸</th>
<th align="center">宽:高</th>
</tr>
</thead>
<tbody><tr>
<td align="center">戴尔</td>
<td align="center">1920 x 1080</td>
<td align="center">102ppi</td>
<td align="center">21.5英寸</td>
<td align="center"></td>
</tr>
</tbody></table>
<h2 id="更多设备类型"><a href="#更多设备类型" class="headerlink" title="更多设备类型"></a>更多设备类型</h2><p><a target="_blank" rel="noopener" href="https://www.mydevice.io/">查看自己设备信息</a></p>
<p><a target="_blank" rel="noopener" href="https://dpi.lv/">计算DPI和所有已知屏幕信息</a></p>
<h1 id="单位"><a href="#单位" class="headerlink" title="单位"></a>单位</h1><h2 id="绝对长度单位"><a href="#绝对长度单位" class="headerlink" title="绝对长度单位"></a>绝对长度单位</h2><h3 id="px"><a href="#px" class="headerlink" title="px"></a>px</h3><ul>
<li>像素<code>pixel</code>: 一个屏幕是很多个像素组成，每个像素就是一个小方格，每个小方格有它的颜色值</li>
</ul>
<h2 id="相对长度单位"><a href="#相对长度单位" class="headerlink" title="相对长度单位"></a>相对长度单位</h2><h3 id=""><a href="#" class="headerlink" title="%"></a>%</h3><ul>
<li>相对于父元素的相同属性的百分比</li>
</ul>
<h2 id="em-rem"><a href="#em-rem" class="headerlink" title="em/rem"></a>em/rem</h2><ul>
<li>em: 相对于该元素字体大小、该元素字体大小则相对于父元素</li>
<li>rem: 相对于根级元素字体大小</li>
</ul>
<h2 id="vw-vh"><a href="#vw-vh" class="headerlink" title="vw/vh"></a>vw/vh</h2><p>视图窗口：视窗<code>viewport</code></p>
<ul>
<li>设备的视图窗口宽度、高度</li>
</ul>
<h1 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h1><h2 id="基本选择器"><a href="#基本选择器" class="headerlink" title="基本选择器"></a>基本选择器</h2><p>base-selector</p>
<ul>
<li><p>通配符选择器<code>*</code></p>
</li>
<li><p>元素选择器<code>element-name</code></p>
</li>
<li><p>类选择器<code>.class-name</code></p>
</li>
<li><p>ID选择器<code>#id-name</code></p>
</li>
<li><p>属性选择器<code>[属性 操作 值 字母]</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 操作可以有 都需要属性存在 */</span><br><span class="hljs-comment">/* null 属性存在-选中</span><br><span class="hljs-comment">   =	属性存在且等于值-选中</span><br><span class="hljs-comment">   ~=   属性存在且用空格分开,其中有一个等于值-选中 常见有background、border</span><br><span class="hljs-comment">   |=   属性存在且等于值或等于值-xxx-选中 常见有lang中的zh-CN、zh-TW</span><br><span class="hljs-comment">   ^=   属性存在且开头等于值-选中   </span><br><span class="hljs-comment">   $=   属性存在且结尾等于值-选中</span><br><span class="hljs-comment">   *=   属性存在且内容存在值-选中 如a[href*=&quot;example&quot;]当href存在example则选中</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-comment">/* 字母可以有 */</span><br><span class="hljs-comment">/* i 	不区分大小写</span><br><span class="hljs-comment">   s	区分大小写，基本不支持</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-comment">/* 选择所有有title的a标签 */</span><br><span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[title]</span>&#123; ... &#125;<br><br></code></pre></td></tr></table></figure></li>
</ul>
<h2 id="分组选择器"><a href="#分组选择器" class="headerlink" title="分组选择器"></a>分组选择器</h2><ul>
<li>选择器列表<code>base-selectorA, base-selectorB</code></li>
</ul>
<h2 id="组合选择器"><a href="#组合选择器" class="headerlink" title="组合选择器"></a>组合选择器</h2><ul>
<li>相邻兄弟选择器<code>base-selectorA + base-selectorB</code></li>
<li>普通兄弟选择器<code>base-selectorA ~ base-selectorB</code></li>
<li>子选择器<code>base-selectorA &gt; base-selectorB</code></li>
<li>后代选择器<code>base-selectorA base-selectorB</code></li>
</ul>
<h2 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a>伪类</h2><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes">伪类</a></p>
<h3 id="常见"><a href="#常见" class="headerlink" title="常见"></a>常见</h3><p>LVHA规则：link - visited - hover - active来放置伪类css顺序</p>
<ul>
<li>:active: 元素被激活<code>用户按下按键和松开按键之间的时间</code> 常用于<code>&lt;a&gt;、&lt;button&gt;、要被拉拽的元素</code></li>
<li>:checked: 元素被选中<code>radio、checkbox和select中的option</code></li>
<li>:focus: 元素获得焦点<code>输入框中点击即获得焦点</code></li>
<li>:focus-within: 元素或者该元素的子代获得焦点</li>
<li>:hover: 元素被虚指<code>指针在元素正上方</code></li>
</ul>
<h2 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h2><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a></p>
<h3 id="常见-1"><a href="#常见-1" class="headerlink" title="常见"></a>常见</h3><ul>
<li>::before</li>
<li>::after</li>
<li>::selection<code>鼠标选中</code></li>
</ul>
<h1 id="实验性属性-amp-老型浏览器"><a href="#实验性属性-amp-老型浏览器" class="headerlink" title="实验性属性&amp;老型浏览器"></a>实验性属性&amp;老型浏览器</h1><p>使用实验性属性需要加上前缀对浏览器的支持</p>
<p>或者支持老的浏览器</p>
<ul>
<li><p>-webkit-：webkit内核 safari和chrome</p>
</li>
<li><p>-moz-：Firefox Gecko内核 firefox</p>
</li>
<li><p>-ms-：IE</p>
</li>
</ul>
<h1 id="内置函数"><a href="#内置函数" class="headerlink" title="内置函数"></a>内置函数</h1><h2 id="url"><a href="#url" class="headerlink" title="url"></a>url</h2><p><code>url(string)</code></p>
<h2 id="rgb-rgba"><a href="#rgb-rgba" class="headerlink" title="rgb/rgba"></a>rgb/rgba</h2><p><code>rgb(r, g, b)/rgba(r, g, b, a)</code></p>
<h2 id="translate"><a href="#translate" class="headerlink" title="translate"></a>translate</h2><h2 id="min"><a href="#min" class="headerlink" title="min"></a>min</h2><h2 id="max"><a href="#max" class="headerlink" title="max"></a>max</h2><h2 id="minmax"><a href="#minmax" class="headerlink" title="minmax"></a>minmax</h2>

    </div>
  </div>
  <div class="go-up">
  <a href="#" rel="go-top">
    <i class="fas fa-angle-up"></i>
  </a>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/js/TweenMax.min.js"></script>
<script src="/js/resizeable.min.js"></script>
<script src="/js/joinable.js"></script>
<script src="/js/xenon-api.min.js"></script>
<script src="/js/xenon-toggles.min.js"></script>
<script src="/js/xenon-custom.min.js"></script>


<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script src="/js/lozad.min.js"></script>


</body>

<script src="/js/footer.js"></script>

</html>
